<template>
  <div class="basic-empty">
    <img :src="getAssetsUrl(`modules/empty/${type}.png`)" />
    <span>{{ tips }}</span>
  </div>
</template>

<script setup lang="ts">
type EmptyType = 'default' | 'help' | 'notice' | 'work-order' | 'message'

interface IProps {
  type?: EmptyType
  margin?: string
  size?: string
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'default',
  margin: '100px',
  size: '14px'
})

const tips = computed(() => {
  const map: Record<EmptyType, string> = {
    default: useI18nContent('common.empty.no_data'),
    help: useI18nContent('common.empty.no_document'),
    notice: useI18nContent('common.empty.no_notice'),
    'work-order': useI18nContent('common.empty.no_order'),
    message: useI18nContent('common.empty.no_message')
  }
  return map[props.type]
})
</script>

<style scoped lang="scss">
.basic-empty {
  @apply flex flex-col items-center text-[14px] text-[#868D9D];

  margin: v-bind('$props.margin') 0;

  img {
    @apply w-[120px] h-[120px];
  }

  span {
    @apply leading-[32px];

    font-size: v-bind('$props.size');
  }
}
</style>
